<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Art Form</title>
</head>
<body>
<div class="dev">
    <h2>依赖的组件</h2>
    <form id="artForm">
        <label for="group-id">group-id</label>
        <input type="text" id="group-id" name="group-id"><br><br>

        <label for="artifact-id">artifact-id</label>
        <input type="text" id="artifact-id" name="artifact-id"><br><br>

        <label for="version">version</label>
        <input type="text" id="version" name="version"><br><br>

        <button type="submit">Submit</button>
    </form>
</div>
<br/>
<div class="dev">
    <h2>组件的依赖</h2>
    <form id="depForm">
        <label for="group-id">他的father</label>
        <input type="text" id="faid" name="actifact-id"><br><br>

        <label for="group-id">group-id</label>
        <input type="text" id="gid" name="group-id"><br><br>

        <label for="artifact-id">artifact-id</label>
        <input type="text" id="aid" name="artifact-id"><br><br>

        <label for="version">version</label>
        <input type="text" id="ver" name="version"><br><br>

        <label for="version">scope</label>
        <input type="text" id="scope" name="scope"><br><br>

        <button type="submit">Submit</button>
    </form>
</div>
<script>
    //关于class为dev的div块，使用黑色实线边框
    document.querySelectorAll(".dev").forEach(function (div) {
        div.style.border = "1px solid black";
    });

    // JavaScript to handle the form submission
    document.getElementById("artForm").addEventListener("submit", function (event) {
        event.preventDefault();  // Prevent the default form submission

        // Collect form data
        const formData = {
            groupid: document.getElementById("group-id").value,
            artifactid: document.getElementById("artifact-id").value,
            version: document.getElementById("version").value
        };

        // Collect form data
        const depData = {
            father: document.getElementById("faid").value,
            groupid: document.getElementById("gid").value,
            artifactid: document.getElementById("aid").value,
            version: document.getElementById("ver").value,
            scope:document.getElementById("scope").value
        };

        // Send the data to the server via POST request
        fetch("http://localhost:8080/art/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(formData)
        })
            .then(async (response) => {
                if (!response.ok){
                    throw new Error("Network response was not ok");
                }
                const jsonContent = await response.json(); // Wait for the JSON response
                console.log("响应内容json:", jsonContent); // Corrected the logging format
                return jsonContent;
            })  // Parse JSON response
            .then(data => {
                console.log("0000")
                console.log("data",data)
                if (data==1){
                    console.log("存储成功")
                    alert("存储成功");
                }
                else{
                    console.log("存储失败")
                    alert("存储失败");
                }
                if (!data){
                    console.log("data",data)
                }
            })
            .catch(error => {
                console.error("Error:", error);
                alert("报错");
            });
    });
</script>
</body>
</html>
